<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="mypage_theme_bg">
			<view class="interval" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<view class="user_ww_info">
				<image
					@click="onPageJump('/pagesMy/my/editInfo')"
					:src="userInfo.headImg || 'http://qn.kemean.cn/upload/202007/08/default_head_img.png'"
					mode="aspectFill"
				></image>
				<view class="user_ww_basicinfo" @click="onPageJump('/pagesMy/my/editInfo')">
					<text>{{ userInfo.nickName || '未登录' }}</text>
					<view v-if="userInfo.nickName">积分：{{ userInfo.integralCount || 0 }}</view>
				</view>
				<image class="user_ww_set" @click="onPageJump('/pagesMy/my/setUp')" src="../../static/icon/theme/ic_set.png" mode="aspectFit"></image>
			</view>
			<view class="balanced_cards_box">
				<view class="balanced_box">
					<view class="balanced_price_info" @click="onPageJump('/pagesMy/my/wallet/wallet')">
						<view>
							￥
							<text>{{ balanceInfo.balance || '0.00' }}</text>
						</view>
						<text>我的余额</text>
					</view>
					<button @click="onPageJump('/pagesMy/my/wallet/drawing')">去提现</button>
				</view>
			</view>
		</view>
		<view class="balanced_card_arc"></view>
		<view class="user_ww_order">
			<view class="user_order_text">
				<view>我的订单</view>
				<text @click="onPageJump('/pages/my/order/orderList')">查看全部订单 ></text>
			</view>
			<view class="user_order_content">
				<view @click="onPageJump('/pages/my/order/orderList?type=1001')">
					<image src="../../static/icon/theme/ic_order_payment.png" mode="aspectFit"></image>
					<text>待付款</text>
					<view class="badge" v-if="userInfo.waitPayCount > 0">{{ userInfo.waitPayCount }}</view>
				</view>
				<view @click="onPageJump('/pages/my/order/orderList?type=1201')">
					<image src="../../static/icon/theme/ic_order_delivery.png" mode="aspectFit"></image>
					<text>待发货</text>
					<view class="badge" v-if="userInfo.waitSendCount > 0">{{ userInfo.waitSendCount }}</view>
				</view>
				<view @click="onPageJump('/pages/my/order/orderList?type=1301')">
					<image src="../../static/icon/theme/ic_order_finished.png" mode="aspectFit"></image>
					<text>待收货</text>
					<view class="badge" v-if="userInfo.waitReceiveCount > 0">{{ userInfo.waitReceiveCount }}</view>
				</view>
				<view @click="onPageJump('/pages/my/order/orderList?type=1401')">
					<image src="../../static/icon/theme/ic_order_rate.png" mode="aspectFit"></image>
					<text>评价</text>
					<view class="badge" v-if="userInfo.waitEvaluateCount > 0">{{ userInfo.waitEvaluateCount }}</view>
				</view>
				<view v-if="module.afterSale" @click="onPageJump('/pages/my/order/orderList?type=1500')">
					<image src="../../static/icon/theme/ic_order_refund.png" mode="aspectFit"></image>
					<text>售后</text>
				</view>
			</view>
		</view>
		<view class="user_ww_myservice">
			<!-- <text>我的服务</text> -->
			<view class="user_myservice_content">
				<view @click="onPageJump('/pages/my/address/addressList')">
					<image src="../../static/icon/theme/ic_my_address.png" mode="aspectFit"></image>
					<text>收货地址</text>
				</view>
				<view @click="onPageJump('/pages/my/coupon')">
					<image src="../../static/icon/theme/ic_my_coupon.png" mode="aspectFit"></image>
					<text>优惠券</text>
				</view>

				<!-- <view @click="onPageJump('/pages/integral/integralMall')">
					<image src="../../static/icon/theme/ic_my_integral.png" mode="aspectFit"></image>
					<text>积分商城</text>
				</view> -->
				<view @click="onPageJump('/pagesMy/my/collect')">
					<image src="../../static/icon/theme/ic_my_collect.png" mode="aspectFit"></image>
					<text>我的收藏</text>
				</view>
				<view @click="onPageJump('/pages/message/message')">
					<image src="../../static/icon/theme/ic_my_news.png" mode="aspectFit"></image>
					<text>我的消息</text>
				</view>
				<view @click="onPageJump('/pagesMy/my/distribution/extendCenter')">
					<image src="../../static/icon/theme/ic_my_promotion.png" mode="aspectFit"></image>
					<text>推广中心</text>
				</view>

				<!-- #ifdef APP-PLUS -->
				<view @click="onShare">
					<image src="../../static/icon/theme/ic_my_share.png" mode="aspectFit"></image>
					<text>分享平台</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share">
					<image src="../../static/icon/theme/ic_my_share.png" mode="aspectFit"></image>
					<text>分享平台</text>
				</button>
				<!-- #endif -->
				<view @click="onPageJump('/pagesMy/my/feedback')">
					<image src="../../static/icon/theme/ic_my_feedback.png" mode="aspectFit"></image>
					<text>意见反馈</text>
				</view>
				<view @click="onPageJump('/pagesMy/my/about')">
					<image src="../../static/icon/theme/ic_my_about.png" mode="aspectFit"></image>
					<text>关于我们</text>
				</view>
				<!-- <view @click="showPopup = true">
					<image src="../../static/icon/theme/ic_my_j.png" mode="aspectFit"></image>
					<text>关注公众号</text>
				</view> -->
			</view>
		</view>
		<attention-public v-model="showPopup" :showBtn="false"></attention-public>
		<view class="technical_support" @click="onCall(supportData.phone)">
			<view>{{supportData.name}}</view>
			<text>{{supportData.description}}</text>
		</view>
	</view>
</template>

<script>
import attentionPublic from '@/components/module/attention_public';

import { mapState, mapMutations } from 'vuex';
// #ifdef APP-PLUS
import {appShare} from '@/config/utils';
// #endif
export default {
	components: {
		attentionPublic
	},
	data() {
		return {
			statusBarHeight: 0,
			showPopup: false,
			shareInfo: {},
			balanceInfo: {},
			module: {},
			supportData: {}
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	//第一次加载
	onLoad(e) {
		this.module = this.$base.module;
		this.supportData = this.$base.supportData;
		//获取手机状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		this.getConfInfo();
	},
	//页面显示
	onShow() {
		this.judgeLogin(() => {
			this.pageData();
		});
	},
	//方法
	methods: {
		...mapMutations(['setUserInfo']),
		onPageJump(url) {
			this.judgeLogin(() => {
				uni.navigateTo({
					url: url
				});
			});
		},
		onShare() {
			// #ifdef APP-PLUS
			appShare(this.shareInfo);
			// #endif
		},
		getConfInfo() {
			this.$http
				.get('api/open/v1/conf', {
					needLogin: false
				})
				.then(res => {
					this.shareInfo = res.share;
				});
		},
		pageData() {
			this.$http.get('api/mime/v1/info').then(res => {
				this.setUserInfo(res);
			});
			this.$http.get('api/mime/wallet/v1/info').then(res => {
				this.balanceInfo = res;
			});
		},
		//拨打电话
		onCall(phone) {
			if (phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		},
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';

page {
	background: #f7f7f7;
}
.mypage_theme_bg {
	background-image: url(http://qn.kemean.cn//upload/202005/19/15899007607655lk8w8pt.png);
	background-position: center bottom;
	background-size: 100% auto;
	background-repeat: no-repeat;
	.user_ww_info {
		padding: 60upx 40upx 35upx 40upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		> image {
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
		}

		.user_ww_basicinfo {
			width: calc(100% - 160upx);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 15upx 30upx;
			flex: 1;

			> text {
				font-size: 32upx;
				color: #ffff;
				margin-bottom: 20upx;
			}

			> view {
				// margin-right: 270upx;
				padding: 9upx 20upx;
				font-size: 24upx;

				color: #fff;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 21upx;
			}
		}

		.user_ww_set {
			width: 44upx;
			height: 42upx;
		}
	}
}
.balanced_cards_box {
	padding: 0upx 30upx 0upx 30upx;

	.balanced_box {
		padding: 0upx 60upx 0upx 80upx;
		height: 148upx;
		background-image: url(../../static/icon/theme/bg_wallet.png);
		background-size: 100% auto;
		//background-color: rgba(0,0,0,0.2);
		//border-radius: 8upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.balanced_price_info {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			color: #fff;

			> view {
				font-size: 24upx;

				> text {
					font-size: 36upx;
				}
			}

			> text {
				font-size: 24upx;
			}
		}

		> button {
			width: 120upx;
			height: 48upx;
			border-radius: 24upx;
			background-color: #ffffff;
			font-size: 24upx;
			line-height: 48upx;
			color: $themeColor;
		}
	}
}

.balanced_card_arc {
	box-sizing: content-box;
	position: absolute;
	background-image: url('../../static/icon/theme/bg_home.png');
	background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	width: 100%;
	height: 64upx;
	margin-top: -55upx;
	z-index: 3;
}

.user_ww_order {
	background: #ffffff;
	margin: 30upx 30upx 20upx 30upx;
	padding-bottom: 30upx;
	display: flex;
	flex-direction: column;
	border-radius: 8upx;
	overflow: hidden;
	box-shadow: 0px 4px 20px 0px rgba(150, 150, 150, 0.1);

	.user_order_text {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx;

		> view {
			font-size: 32upx;
			color: #333333;
			font-weight: bold;
		}

		> text {
			font-size: 24upx;
			color: #999999;
		}
	}

	.user_order_content {
		display: flex;
		justify-content: space-around;
		align-items: center;

		> view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
			position: relative;

			> image {
				width: 40upx;
				height: 40upx;
				margin-bottom: 20upx;
			}
			.badge {
				position: absolute;
				top: -16rpx;
				right: 0;
				background-color: #f56c6c;
				border-radius: 20rpx;
				color: #fff;
				display: inline-block;
				font-size: 24rpx;
				height: 32rpx;
				line-height: 28rpx;
				padding: 0 8rpx;
				text-align: center;
				white-space: nowrap;
				border: 2rpx solid #fff;
				transform: translateX(50%);
			}
		}
	}
}

.user_ww_myservice {
	background: #ffffff;
	margin: 0upx 30upx 0upx 30upx;
	//padding: 30upx 0upx;
	display: flex;
	flex-direction: column;

	border-radius: 8upx;
	overflow: hidden;
	box-shadow: 0px 4px 20px 0px rgba(150, 150, 150, 0.1);

	> text {
		padding: 0upx 30upx;
		font-size: 32upx;
		color: #333333;
		padding-bottom: 20upx;
		font-weight: bold;
	}

	.user_myservice_content {
		display: flex;
		//flex-wrap: wrap;
		flex-direction: column;
		//align-items: center;

		> view, > button {
			height: 98upx;
			display: flex;
			//flex-direction: column;
			align-items: center;
			color: #333333;
			font-size: 24upx;
			background-color: transparent;
			//width: 25%;
			//padding: 20upx 0upx;

			image {
				margin: 0 30upx;
				width: 40upx;
				height: 40upx;
				//margin-bottom: 20upx;
			}
		}
	}
}
.technical_support {
	text-align: center;
	padding: 30rpx 30rpx 30rpx 30rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	view {
		font-size: 38rpx;
		font-weight: bold;
		color: #aaa;
	}
	text {
		font-size: 24rpx;
		color: #bbb;
		margin-top: 10rpx;
	}
}
</style>
